웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] json 문법에 대하여 이해하기

Last Modified : 2017-10-20 / Created : 2016-05-16
13,251
View Count

오늘은 데이터 타입의 하나로 매우 넓리 사용되는 JSON 타입에 대하여 알아보려한다.

json은 데이터의 타입 중 하나로 잘알려진 XML과 함께 많이 사용되고 있다. 이런 json은 서버와의 데이터 통신시 전달되는 데이터로 많이 쓰이고 비동기 방식의 ajax() 메소드들과 함께도 많이 사용된다.

처음 json 타입을 보게되면 객체와 차이점을 느끼기 어렵다. json 타입은 객체와 매우 유사한 모습을 띄고 있으며 차이점이라면 사용되는 이름 그리고 값 모두가 따옴표(")를 사용하여 표기된다는 점이다. 이는 자바스크립트 객체와 차이점으로 아래의 코드를 통해 무엇이 다른지 확인이 가능하다.

/* 자바스크립트 객체의 문법 */
{
  name: "Webisfree",
  gender: "male"
}

/* JSON 형태의 문법 */
{
   "name" : "Webisfree",
   "gender": "male"
}

보는 것처럼 반드시 이름(name)에도 따옴표가 필요한 점 꼭 기억하자. 또한 json 타입은 ' 표기가 아닌 double quotes인 " 표기가 사용되어야 한다. 이는 자바스크립트의 이름값과의 또 다른 차이점이다.

이 둘의 공통점이 있다면 따옴표를 제외하면 외형이 거의 유사하다는 점이고 둘 다 세미콜론(;)을 사용할 필요가 없다는 점도 같다.



# JSON이 가질 수 있는 값은?

json 타입은 아래와 같은 값으로 사용될 수 있다.

1. 숫자 Number
2. 문자 String
3. 불리언 Boolean
4. 배열 Array
5. 객체 Object
6. 빈값 Null


JSON이 많이 사용되는 이유는 자바스크립트내에서 다루기 쉽다는 점이 크다. json의 형태가 자바스크립트의 객체와 비슷하며 이를 객체로 쉽게 파싱할 수 있도록 JSON.parse() 함수가 존재한다. 이 함수를 사용하면 json 형태의 데이터를 간단하게 객체로 파싱하여 사용할 수 있다. 간단하게 예를들면 다음과 같이 사용된다.

var jsonText = '{"fruit": "orange", "coffee": "black"}';
var objVal = JSON.parse(jsonText);
// json 타입을 객체로 파싱, 변환함

console.log(objVal.fruit);
// 변환된 객체의 fruit 속성을 출력

출력되는 값은 다음과 같다.

orange

// 객체로 변환되 반환된 값이 정상적으로 출력됨


# 추가로 XML과 JSON의 큰 차이점은 무엇일까?

둘 다 장단점을 가지고 있다 하겠다. 하지만 JSON의 경우 자바스크립트에서 바로 파싱이 가능하다는 점이 가장 큰 차이점이고 또한 json은 배열값으로 사용할 수 있다는 점 역시 큰 차이점이다. JSON 타입이 많이 사용되고 선호되는 이유는 이용하기 쉽고 빠르다는 장점 때문이다. 하지만 XML 문서인 경우라면 당연히 xml 타입이 더 선호될 것이다.



Previous

[jQuery] 이전 또는 다음 요소 선택하기, prev(), next()

Previous

[jQuery] 무한 스크롤 구현하기, 스크롤 이벤트 scroll()